<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list-item {
            height: 400px;
            margin: 5px;
            list-style: none;
        }
        .list-item-img {
            width: 100%;
        }
    </style>
</head>

<body>
    <ul id="list">
        <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                data-original="https://img.36krcdn.com/hsossms/20250313/v2_15ad8ef9eca34830b4a2e081bbc7f57a@000000_oswg172644oswg1536oswg722_img_000?x-oss-process=image/resize,m_mfit,w_960,h_400,limit_0/crop,w_960,h_400,g_center" />
        </li>
        <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                data-original="https://img.36krcdn.com/hsossms/20250312/v2_aeaa7a1d51e74c3a8f909c96cd73a687@000000_oswg169950oswg1440oswg600_img_jpeg?x-oss-process=image/format,webp" />
        </li>
        <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                data-original="https://img.36krcdn.com/hsossms/20250312/v2_1c88dc26ff9341cf8738d670896ce3a8@5284654_oswg847922oswg1440oswg600_img_png?x-oss-process=image/resize,m_mfit,w_960,h_400,limit_0/crop,w_960,h_400,g_center/format,webp" />
        </li>
        <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                data-original="https://img.36krcdn.com/hsossms/20250312/v2_e1d92f43af2c4f47b8852ea8786e606f@6100851_oswg635095oswg1053oswg495_img_png?x-oss-process=image/resize,m_mfit,w_960,h_400,limit_0/crop,w_960,h_400,g_center/format,webp" />
        </li>
        <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                data-original="https://img.36krcdn.com/hsossms/20250307/v2_9295b22d4a1b4b55ac4c3379b2da80cc@6100851_oswg781048oswg1053oswg495_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center/format,webp" />
        </li>
        <li class="list-item"><img src="" class="list-item-img" lazyload="true"
                data-original="https://img.36krcdn.com/hsossms/20250313/v2_0f70e0a75a8d4736a050e846cd6ab3e5@1743780481_oswg183216oswg1080oswg629_img_000?x-oss-process=image/format,jpg/interlace,1" />
        </li>
    </ul>

    <script>
        // // 减少onscroll 的次数
        // var a = 1;
        // window.onscroll = function() {
        //     a++;
        //     console.log(a);
        // }

        function addObserver() {
            // 都应该被观察
            const eles = document.querySelectorAll('img[data-original][lazyload]')
            // Array.prototype.map.call(eles,ele => {
            //     console.log(ele);
            // })
            // [...eles]
            // Array.from(eles).map(ele => {
            //     console.log(ele,'...');
            // })
            // Array.prototype.forEach.call(eles)
            const observer = new IntersectionObserver(function(changes) {
                // console.log(changes);
                changes.forEach(function(element) {
                    if(element.intersectionRatio>0 && element.intersectionRatio<=1){
                        // 图片进入了视窗
                        // element.target.src = element.target.dataset.original;
                        const img = new Image();
                        img.src = element.target.dataset.original;
                        img.onload = function() {
                            element.target.src = img.src;
                        }
                    }
                })
            })
            eles.forEach((item) => {
                // 每个都观察
                // 浏览器
                // item 被观察者
                // 设计模式中的观察者模式
                observer.observe(item);
            })
        }
        addObserver();
    </script>
</body>

</html>